<template> 
  <div>
    <el-divider content-position="left"><span style='font-size:18px;'><i class="el-icon-edit"></i>{{flowExtInfo.nodeName}}</span></el-divider>
    <avue-form ref="flowForm" v-model="flowExtInfo" :option="option" @reset-change="emptytChange" @submit="submit">
      <template slot-scope="scope" slot="fileSlot">
        <file-selector
          :fileList="flowExtInfo.fileList"
          :openType="openType"
          :multiple="true"
          @changeFileList='changeFileList'
        >
        </file-selector>
      </template>
    </avue-form> 
  </div> 
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  props: {
    flowExtInfo: {
      type: Object
    },
    processData:{
      type: Object
    },
  },
  data() {
    return {
      //文件选择器的打开方式 add新增、edit修改、view 查看
      openType: 'edit',
      
      // 当前打开form对话框操作类型 
      operateType: 'add',

      activeNames: ['1'],
      form: {},
      showColumn: [],
      option: {
        menuBtn:false,
        emptyBtn:false,
        menuSpan:10,
        labelWidth: 120,
        column: [
          {
            label: '上节点',
            prop: 'prevNodeNameList', 
            type: 'input', 
            value: '0',
            span: 24,
            disabled: true,
            dicData:[]
          },
          {
            label: '上次处理人',
            prop: 'prevProcessUser', 
            type: 'select', 
            multiple: true,
            value: '0',
            span: 24, 
            disabled: true,
            dicData:[]
          },
          {
            label: '上次处理意见',
            prop: 'prevNodeOpinion', 
            type: 'input', 
            span: 24, 
            disabled: true,
            display: true,
          },
          {
            label: '处理结果',
            prop: 'nodeStatus', 
            type: 'radio', 
            border:true,
            multiple: false,
            value: '0',
            span: 24, 
            display: true,
            change: ({value,column}) => {
              this.statusChange(value);
            },
            dicData:[]
          },
          {
            label: '下个节点',
            prop: 'nextNode', 
            type: 'select', 
            filterable: true,
            button:true,
            multiple: true,
            display: true,
            span: 24,
            dicData:[]
          },
          {
            label: '委托给',
            prop: 'delegateUser', 
            type: 'select', 
            filterable: true,
            span: 24,
            display: this.flowExtInfo.isDelegateFlag,
            remote: true,
            change: ({value,column}) => {
              this.checkToType(value,'1');
            },
            props: {
              label: 'userName',
              value: 'realName',
            },
            dicFlag: false,
            dicMethod:'get',
            dicUrl: '/platform/sysUserInfo/querySysUserInfoListPage?optFlag=org&remote=yes&columnValue={{key}}&columnName=realName&tenantId='+localStorage.getItem('tenantId'),
            rules: [{
              required: false,
              message: '请输入内容',
            }],
          },
          
          
          {
            label: '转派给',
            prop: 'transferUser', 
            type: 'select', 
            filterable: true,
            span: 24,
            remote: true,
            display: this.flowExtInfo.isTransferFlag,
            props: {
              label: 'userName',
              value: 'realName',
            },
            change: ({value,column}) => {
              this.checkToType(value,'2');
            },
            dicFlag: false,
            dicMethod:'get',
            dicUrl: '/platform/sysUserInfo/querySysUserInfoListPage?optFlag=org&remote=yes&columnValue={{key}}&columnName=realName&tenantId='+localStorage.getItem('tenantId'),
            rules: [{
              required: false,
              message: '请输入内容',
            }],
          },
          {
            label: '转给',
            prop: 'optUser', 
            type: 'select', 
            multiple: true,
            filterable: true,
            span: 24,
            group: true,
            display: true,
            disabled: false,
            dicData:[],
            rules: [{
              required: false,
              message: '请输入内容',
            }],
          },
          {
            label: '抄送',
            prop: 'ccUser', 
            type: 'select', 
            multiple: true,
            filterable: true,
            span: 24,
            group: true,
            display: true,
            disabled: false,
            dicData:[],
            rules: [{
              required: false,
              message: '请输入内容',
            }],
          },
          {
            label: '共同处理人',
            prop: 'joinUser', 
            type: 'select', 
            multiple: true,
            filterable: true,
            disabled: true,
            display: this.flowExtInfo.isJoinFlag,
            span: 24,
            dicData:[]
          },
          {
            label: '处理意见',
            prop: 'processOpinion', 
            type: 'textarea', 
            span: 24,
            sortable: false,
            hide: false,
            maxlength: 1000,
            overHidden: true,
            showWordLimit:true,
            maxRow:5,
            minRow:3,
            rules: [{
              message: '请输入处理意见',
              required:  true,
              trigger: 'blur'
            },
            {
              max: 1000,
              message: '内容长度不能超过100字符',
              trigger: 'blur'
            }],
            dicData:[],
          },
          {
            label: '附件',
            prop: 'fileSlot', 
            formslot:true,
            span: 24
          },
        ],
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(['website','userInfo','orgTree','permission']), 
  },
  methods: { 
    /**
     * 选择文件后由子组件触发修改fileList
     */
    changeFileList(fileList){
      this.flowExtInfo.fileList = fileList;
    },
    /**
     * 转派给和委派给只能选择其一
     */
    checkToType(value,type){
      //委派给
      if(value != '' && type == '1'){
      }
    },
    /**
     * 状态改变，更新下个节点值
     */
    statusChange2(val){
    },
    statusChange(val){
      if(!this.flowExtInfo.nextNodeList){
        return false;
      }
      let foundFlag = false;
      let foundCount = 0;  
      let userFoundFlag = false;
      this.flowExtInfo.nextNodeList.forEach(element => {
        if(element.nextNodeStatus == val){
          this.findObject(this.option.column, 'nextNode').dicData = element.nextNodeDict
          this.flowExtInfo.nextNode = element.nextNode
          foundFlag = true;
          foundCount++;
        }
      });
      if(!foundFlag){
        this.findObject(this.option.column, 'nextNode').dicData = []
      }
      //变更可选用户列表
      this.flowExtInfo.optUserList.forEach(element => {
        if(element.nextNodeStatus == val){
          this.findObject(this.option.column, 'optUser').dicData = element.optUserDict
          this.findObject(this.option.column, 'optUser').disabled = element.flowTransferMode
          this.flowExtInfo.optUser = element.optUser
          
          userFoundFlag = true;

          //如果是子流程 或通过自定义条件跳转的（foundCount>1），则隐藏 转给、转派、委派 下个节点等信息
          if(element.isSubFlow == '1' || foundCount > 1){
            this.findObject(this.option.column, 'optUser').display = false;
            this.findObject(this.option.column, 'ccUser').display = false;
            this.findObject(this.option.column, 'nextNode').display = false;
            this.findObject(this.option.column, 'delegateUser').display = false;
            this.findObject(this.option.column, 'transferUser').display = false;
            this.flowExtInfo.isSubFlow = '1'
          }
          else{
            this.flowExtInfo.isSubFlow = '0'
            //没用户时将流程状态标记为结束
            if(element.optUserDict.length > 0 && element.optUserDict[0].groups.length == 0){
              this.findObject(this.option.column, 'optUser').display = false;
              this.findObject(this.option.column, 'ccUser').display = false;
              this.findObject(this.option.column, 'nextNode').display = false;
              this.findObject(this.option.column, 'delegateUser').display = false;
              this.findObject(this.option.column, 'transferUser').display = false;
              this.flowExtInfo.flowEndFlag  = '2';
            }
            else
            {
              this.findObject(this.option.column, 'optUser').display = true;
              this.findObject(this.option.column, 'ccUser').display = true;
              this.findObject(this.option.column, 'nextNode').display = true;
              if(this.flowExtInfo.isDelegateFlag){
                this.findObject(this.option.column, 'delegateUser').display = true;
              }
              if(this.flowExtInfo.isTransferFlag){
                this.findObject(this.option.column, 'transferUser').display = true;   
              }
              this.flowExtInfo.flowEndFlag  = '1';
            }
          }
          //抄送处理
          if(element.ccUserDict.length > 0){
            this.findObject(this.option.column, 'ccUser').display = false;
            this.findObject(this.option.column, 'ccUser').dicData = element.ccUserDict
            this.findObject(this.option.column, 'ccUser').disabled = element.flowTransferMode
            this.flowExtInfo.ccUser = element.ccUser
          }
          else {
            this.findObject(this.option.column, 'ccUser').display = false;
          }
        }
      });
      if(!userFoundFlag){
        this.findObject(this.option.column, 'optUser').dicData = []
        this.findObject(this.option.column, 'ccUser').dicData = []
        this.flowExtInfo.optUser = []
        this.flowExtInfo.ccUser = []
      }

      //如果是撤回其他审批区域不可修改，处理结果除外
      if(this.processData.processStatus != ''){
        this.findObject(this.option.column, 'optUser').disabled=true;
        this.findObject(this.option.column, 'ccUser').disabled=true;
        this.findObject(this.option.column, 'nextNode').disabled=true;
        this.findObject(this.option.column, 'delegateUser').disabled=true;
        this.findObject(this.option.column, 'transferUser').disabled=true;
        this.findObject(this.option.column, 'nodeStatus').disabled=true;
      }

      //如果是简单模式，则只显示审批意见和附件
      if(this.flowExtInfo.easyModeFlag == '1'){
        this.findObject(this.option.column, 'optUser').disabled=true;
        this.findObject(this.option.column, 'prevNodeNameList').display = false;
        this.findObject(this.option.column, 'prevProcessUser').display = false;
        this.findObject(this.option.column, 'prevNodeOpinion').display = false;

        this.findObject(this.option.column, 'ccUser').disabled = true;
        this.findObject(this.option.column, 'nextNode').display = false;
        this.findObject(this.option.column, 'delegateUser').display = false;
        this.findObject(this.option.column, 'transferUser').display = false;
        this.findObject(this.option.column, 'nodeStatus').display = false;
      }
    },

    /**
     * 初始化表单数据 flowEndFlag 0-开始，1-过程中 2-结束
     */
    initForm(){
      if(this.flowExtInfo.nodeStatusList && this.flowExtInfo.nodeStatusList.length > 0){
        this.findObject(this.option.column, 'nodeStatus').dicData = this.flowExtInfo.nodeStatusList
        this.findObject(this.option.column, 'nodeStatus').display = true;
      }
      else{
        this.findObject(this.option.column, 'nodeStatus').display = false;
      }
      this.findObject(this.option.column, 'optUser').display = (this.flowExtInfo.flowEndFlag == '1');
      this.findObject(this.option.column, 'ccUser').display = (this.flowExtInfo.flowEndFlag == '1');
      this.findObject(this.option.column, 'nextNode').display = (this.flowExtInfo.flowEndFlag == '1');
      this.findObject(this.option.column, 'delegateUser').display = this.flowExtInfo.isDelegateFlag;
      this.findObject(this.option.column, 'transferUser').display = this.flowExtInfo.isTransferFlag;
      
      this.statusChange(this.flowExtInfo.nodeStatus);

    }
  },
  created() {
    this.$console.log('his.processData.processStatus===',this.processData.processStatus);
    if(this.processData.processStatus != ''){
      this.openType = 'view'
    }
  },
  mounted() {
    
  },
  watch: {
    flowExtInfo: function (val) {
      this.$emit('handleFlowChange', val)
      if(val){
        this.initForm();
      }
    },
  }
};
</script>
